<template>
  <div>
      <el-card style="width: 98%; border-radius: 10px; margin-left: 10px; margin-top: 10px" class="box-card">
        <div slot="header" class="clearfix">
          <el-tag type="success" effect="dark">桶内所有对象</el-tag>
          <el-button style="float: right; padding: 3px 0" type="text" @click="getAllObs">刷新桶内对象</el-button>
        </div>
        <el-table
          :data="obsArray"
          style="width: 100%"
          :default-sort = "{prop: 'date', order: 'descending'}"
        >
          <el-table-column
            align="center"
            prop="Key"
            label="名称"
            sortable
            width="300">
            <template slot-scope="scope">
              <el-link @click="toPreview(scope.row.Key)" type="primary">{{ scope.row.Key }}</el-link>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="StorageClass"
            label="存储类别"
            width="120">
          </el-table-column>
          <el-table-column
            width="120"
            align="center"
            prop="Size"
            sortable
            label="大小">
          </el-table-column>
          <el-table-column
            align="center"
            prop="ETag"
            label="内容标识">
          </el-table-column>
          <el-table-column
            width="160"
            align="center"
            prop="LastModified"
            label="最后修改时间">
          </el-table-column>
          <el-table-column
            width="140"
            align="center"
            fixed="right"
            label="操作">
            <template slot-scope="scope">
              <el-button size="small" type="text" @click="toDownload(scope.row)">下载</el-button>
              <el-button size="small" type="text" @click="toShare(scope.row)">分享</el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="total>0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getAllObs"
        />
      </el-card>

    <!--img-->
    <el-dialog
      :visible.sync="dialogVisible"
      width="30%"
      >
      <el-image :src="dynamicUrl"></el-image>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>

    <!--doc、docx、pdf-->
    <el-dialog
      :visible.sync="dialogVisiblePdf"
      width="80%"
    >
      <iframe frameborder="0"
              style="height: 480px; margin-top: -40px"
              :src="dynamicUrl"
              width='100%'>
      </iframe>
      <span slot="footer" class="dialog-footer">
         <el-button @click="dialogVisiblePdf = false">取 消</el-button>
         <el-button type="primary" @click="dialogVisiblePdf = false">确 定</el-button>
      </span>
    </el-dialog>

    <!--分享-->
    <el-dialog
      title="分享"
      :visible.sync="dialogVisibleShare"
      width="60%"
      >

      <el-row style="margin-left: 20px" :gutter="30">
        <el-col :span="30">
          <el-tag effect="dark" type="primary">文件名称</el-tag>
          <span style="margin-left: 20px">{{ fileName }}</span><br/>
        </el-col>
      </el-row>

      <el-row style="margin-left: 20px" :gutter="30">
        <el-col :span="30">
          <el-tag style="margin-top: 20px; float: left" effect="dark" type="primary">链接信息</el-tag>
          <el-input
            style="margin-top: 20px; float: left; width: 520px; margin-left: 20px"
            type="textarea"
            :autosize="{ minRows: 4, maxRows: 4}"
            v-model="textarea">
          </el-input>
        </el-col>
      </el-row>

      <el-row style="margin-left: 20px" :gutter="30">
        <el-col :span="30">
          <el-button style="margin-left: 260px; margin-top: 20px" type="text" size="small" @click="toCopy">复制内容</el-button>
          <el-button type="text" size="small" @click="dialogVisibleShare = false">关闭窗口</el-button>
        </el-col>
      </el-row>
    </el-dialog>

  </div>
</template>

<script>

  import { getAllObs } from '../../../api/obs/upload'

  export default {
    name: 'index',
    data() {
      return{
        fileName: '',
        textarea: '',
        dynamicUrl: '',
        dialogVisible: false,
        dialogVisiblePdf: false,
        dialogVisibleShare: false,
        obsArray: [],
        total: 0,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10
        }
      }
    },
    created() {
     this.getAllObs()
    },
    methods: {
      getAllObs() {
        // 获取所有obs存储的对象
        getAllObs(this.queryParams).then(res => {
          console.log(res)
          this.obsArray = res.rows
          this.total = res.total
        })
      },
      // 下载
      toDownload(data) {
        console.log(data.Key)
        window.location.href = 'https://tlgenhuawei.obs.cn-north-4.myhuaweicloud.com/' + data.Key
      },
      // 预览
      toPreview(data) {

        this.dynamicUrl = 'https://tlgenhuawei.obs.cn-north-4.myhuaweicloud.com/' + data

        if (data.includes('.png') || data.includes('.img') || data.includes('.jpg')) {
          this.dialogVisible = true
        } else if (data.includes('.pdf')) {
          this.dialogVisiblePdf = true
        } else if (data.includes('.doc')) {
          this.dialogVisiblePdf = true
          var uri = encodeURI(this.dynamicUrl)
          this.dynamicUrl = 'https://view.officeapps.live.com/op/view.aspx?src=' + uri
        }
        console.log(this.dynamicUrl)
      },
      // 分享
      toShare(data) {
        this.dialogVisibleShare = true
        console.log(data)
        this.fileName = data.Key
        this.textarea = 'https://tlgenhuawei.obs.cn-north-4.myhuaweicloud.com/' + data.Key
      },
      // 复制链接
      toCopy() {
        const input = document.createElement('input')
        document.body.appendChild(input)
        input.setAttribute('value',this.textarea)
        input.select()
        if (document.execCommand('copy')) {
          document.execCommand('copy')
        }
        document.body.removeChild(input)
        this.msgSuccess('复制成功!')
      }
    }
  }
</script>

<style scoped>

</style>
